<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <script th:src="@{/assets/js/jquery-1.11.3.js}"></script>
    <link th:href="@{/assets/css/upload.css}" rel="stylesheet" type="text/css"/>
</head>
<body>

<form enctype="multipart/form-data">
    <p>
        文件：<input type="file" name="file" id="file" multiple/>
    </p>
    <p>
        <button type="button" id="submit" >上传</button>
    </p>
</form>

<progress id="progressBar" value="0" max="100"
          style="width: 100%;height: 20px; "></progress>
<span id="percentage" style="color:blue;"></span>

<script>

    function UploadFile() {
        var FileController = "/test/uploadfile"; // 接收上传文件的后台地址
        var form = new FormData();
        var fileList = document.getElementById("file").files;
        for (var i = 0; i < fileList.length; i++) {
            form.append("file", fileList[i]);
        }

        var xhr = new XMLHttpRequest();
        xhr.open("POST", FileController, true);
        xhr.upload.addEventListener("progress", progressFunction, false);
        xhr.send(form);
    }

    function progressFunction(evt) {
        var progressBar = document.getElementById("progressBar");
        var percentageDiv = document.getElementById("percentage");
        if (evt.lengthComputable) {
            progressBar.max = evt.total;
            progressBar.value = evt.loaded;
            percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100)+ "%";
        }
    }

    $(function () {
        $("#submit").bind('click',function () {
            UploadFile();
        })
    });
    
</script>

</body>
</html>
